<script setup>
import {getCurrentInstance, reactive } from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const loginForm = reactive({
  username: "admin",
  password: "admin",
});

const { proxy } = getCurrentInstance();
const store = useStore();
const router = useRouter();

async function login() {
  const res = await proxy.$api.getMenu(loginForm);
  // console.log(res.menu)
  store.commit("setMenu", res.menu);
  // console.log("router is")
  // console.log(router)
  store.commit("addMenu", router);
  // console.log("addMenu success")
  console.log(res.token)
  store.commit("setToken", res.token);
  router.push({
    name: "home",
  });
}

</script>

<template>
<el-form :model="loginForm" class="login-container">
  <h3>login system</h3>
  <el-form-item>
    <el-input
        type="input"
        placeholder="username"
        v-model="loginForm.username"
    >
    </el-input>
  </el-form-item>
  <el-form-item>
    <el-input
        type="password"
        placeholder="password"
        v-model="loginForm.password"
    >
    </el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="login">login</el-button>
  </el-form-item>
</el-form>
</template>

<style lang="less" scoped>
.login-container {
  width: 350px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  border-radius: 15px;
  padding: 35px 35px 15px 35px;
  box-shadow: 0 0 25px #cacaca;
  margin: 180px auto;
  h3 {
    text-align: center;
    margin-bottom: 20px;
    color: #505450;
  }
  :deep(.el-form-item__content) {
    justify-content: center;
  }
}
</style>